<div class="wpo-site-header">
    <nav class="navigation navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-2 col-md-3 col-6">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggler open-btn">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar first-angle"></span>
                        <span class="icon-bar middle-angle"></span>
                        <span class="icon-bar last-angle"></span>
                    </button>
                    <a class="navbar-brand" href="/index.html"><img src="/assets/images/logo.svg" alt=""></a>
                </div>
            </div>
            <div class="col-lg-8 col-md-2 col-1">
                <div id="navbar" class="collapse navbar-collapse navigation-holder">
                    <button class="close-navbar"><i class="ti-close"></i></button>
                    <ul class="nav navbar-nav mb-2 mb-lg-0" th:each="wc:${wcl}">
                        <li><a th:href="${wc.href}" style="">[[${wc.title}]]</a>
                            <ul th:class="${wc.children} == null ? null : 'sub-menu'">
                                <li th:class="${wcc.children} == null ? null : 'menu-item-has-children'" th:each="wcc:${wc.children}">
                                    <a th:href="${wcc.href}">[[${wcc.title}]]</a>
                                    <ul th:class="${wcc.children} == null ? null : 'sub-menu'">
                                        <li th:each="wccc:${wcc.children}">
                                            <a th:href="${wccc.href}">[[${wccc.title}]]</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div id="dl-menu" class="dl-menuwrapper">
                        <button class="dl-trigger">Open Menu</button>
                        <ul class="dl-menu">
                            <li th:each="wc:${wcl}"><a th:href="${wc.href}">[[${wc.title}]]</a>
                                <ul th:class="${wc.children} == null ? null : 'dl-submenu'">
                                    <li th:each="wcc:${wc.children}">
                                        <a th:href="${wcc.href}">[[${wcc.title}]]</a>
                                        <ul th:class="${wcc.children} == null ? null : 'dl-menu'">
                                            <li  th:each="wccc:${wcc.children}">
                                                <a th:href="${wccc.href}">[[${wccc.title}]]</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /dl-menuwrapper -->
                </div><!-- end of nav-collapse -->
            </div>
        </div>
    </div>
    <!-- end of container -->
    </nav>
</div>